<!--老虎机活动-->
<template>
	<view class="">
		<view class="hdtybox" :class="hdc">
			<topboxVue :tit="$t('hd.bt2')"></topboxVue>
			<view class="lhjbox">
				<view class="lhjbox-jdtbox bj_left">
					<image src="/static/hd/lhji1.png" class="lhjbox-jdtbox-ico"></image>
					<view class="" style="flex: 1;">
						<view class="cff mb20 f26">
							{{$t("hd.lhjname")}}
						</view>
						<view class="bj_left">
							<view class="lhjbox-jdtbox-jdtm">
								<view class="lhjbox-jdtbox-jdtm-jdtt"
									:style="'width: '+(data.bet_today / data.betting_need)+'%;'">
		
								</view>
								<view class="lhjbox-jdtbox-jdtm-jdtnum">
									{{data.bet_today}}/{{data.betting_need}}
								</view>
							</view>
							<view class="cy">
								{{data.max_prize}}{{$t("menu.$")}}
							</view>
						</view>
					</view>
				</view>
				<view class="lhjbox-numbox bj_between">
					<!-- 老虎机主体 -->
					<view class="slot-machine">
						<!-- 5个数字列 -->
						<view v-for="(digit, index) in digits" :key="index" class="slot-column">
							<!-- 数字视口（严格裁剪区域） -->
							<view class="digit-viewport">
								<!-- 数字带（三套0-9实现无缝滚动） -->
								<view class="digit-band" :style="getBandStyle(digit)">
									<view v-for="n in visibleNumbers" :key="n" class="digit">
										{{ n % 10 }} <!-- 始终显示0-9 -->
									</view>
								</view>
							</view>
						</view>
					</view>
		
				</view>
				<view class="lhjbox-btn" @click="startRolling">
					{{$t("hd.lhjbtn")}}X{{data.slot_times}}
				</view>
				<view class="f30 cff mb20">
					{{$t("hd.lhjtit1")}}
				</view>
				<view class="f26 cff mb10">
					{{$t("hd.lhjtit2")}}
				</view>
				<view class="c9c f22 mb20">
					<text>{{$t("hd.lhjtxt1")}}</text>
					<text class="cy">{{data.max_prize}}</text>
					<text>{{$t("hd.lhjtxt2")}}</text>
				</view>
				<view class="f26 cff mb10">
					{{$t("hd.lhjtit3")}}
				</view>
				<view class="c9c f22">
					{{$t("hd.lhjtxt3")}}
				</view>
				<view class="cy f22 mb20">
					{{$t("hd.lhjhz2")}}
				</view>
				<view class="f26 cff mb10">
					{{$t("hd.lhjtit4")}}
				</view>
				<view class="c9c f22">
					{{$t("hd.lhjtxt4")}}
				</view>
				<view class="c9c f22">
					{{$t("hd.lhjtxt5")}}
				</view>
				<view class="c9c f22">
					{{$t("hd.lhjtxt6")}}
				</view>
			</view>
		
		
			<zero-loading type="surround" v-if="loading"></zero-loading>
			<bottomVue style="margin-top: 100rpx;"></bottomVue>
			
		</view>
		<moneygcVue ref="mgcv"></moneygcVue>
	</view>
	
</template>

<script setup>
	import {
		ref,
		inject,
		provide,
		computed,
		onMounted
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import topboxVue from '../common/topbox.vue';
	import useI18n from '@/store/useI18n.js'
	import bottomVue from "../common/bottom-slotsbr.vue";
	import common from '../../js/common';
	import moneygcVue from "../common/moneygc.vue";
	let mgcv = ref(null)
	const {
		t
	} = useI18n()
	provide("repage", repage);
	// 父级关闭活动的方法
	const clhd = inject("clhd");
	let hdc = ref("hdpagein")
	let data = ref({})

	function repage() {
		hdc.value = "hdpageout";
		clhd();
	}
	let loading = ref(false)

	onShow(function() {
		winit();
	})

	function winit() {
		loading.value = true
		common.slotInit({}).then(res => {
			data.value = res.data.data
			loading.value = false
		})
	}



	const digits = ref(
		Array(5).fill().map(() => ({
			position: 0, // 初始位置为0（显示第一个数字0）
			target: 0,
			rolling: false
		}))
	)

	// 可见数字范围（三套0-9保证无缝滚动）
	const visibleNumbers = computed(() => {
		return Array.from({
			length: 30
		}, (_, i) => i % 10)
	})

	// 初始化时确保显示0
	onMounted(() => {
		digits.value.forEach(d => {
			d.position = 0
		})
	})

	// 获取数字带样式
	const getBandStyle = (digit) => {
		return {
			transform: `translateY(${-digit.position * 160}rpx)`,
			transition: digit.rolling ?
				`transform 3s cubic-bezier(0.1, 0.8, 0.2, 1)` : 'none',
			// 关键修复：确保渲染层级
			willChange: 'transform'
		}
	}

	let ifact = ref(false)
	let gm = ref(0) // 最终获得的金钱

	// 开始滚动
	const startRolling = () => {

		if (data.value.slot_times == 0 || loading.value || ifact.value) {
			return;
		}
		loading.value = true
		ifact.value = true
		common.slotBegin().then(res => {
			digits.value.forEach(d => {
				d.position = 0
			})
			data.value.slot_times--
			togd(String(res.data.data.result).replace(/,/g, ""));
			gm.value = res.data.data.money
			loading.value = false
		})

	}

	// result结果值
	function togd(result) {

		digits.value.forEach((digit, index) => {
			digit.rolling = true
			digit.target = parseInt(result[index])

			// 先快速滚动几圈（position增加量 = 圈数×10）
			digit.position += 30

			// 延迟设置最终位置（错开停止时间）
			setTimeout(() => {
				// 定位到中间副本（10-19范围）
				digit.position = digit.target + 10
			}, 1000 + index * 200)

			// 滚动结束后重置到主副本（0-9）
			setTimeout(() => {
				digit.rolling = false
				digit.position = digit.target
				ifact.value = false
				mgcv.value.setm(gm.value)

				// winit();
			}, 3000)
		})
	}
</script>

<style scoped lang="scss">
	.lhjbox {
		padding: 30rpx 20rpx;
		background: url("/static/hd/lhjb.png") #003311 no-repeat center 0;
		background-size: 100% auto;

		&-jdtbox {
			background: url("/static/hd/lhjtb.png") no-repeat center center;
			background-size: 100% 100%;
			width: 100%;
			height: 144rpx;
			margin-bottom: 170rpx;
			padding: 28rpx 24rpx;

			&-ico {
				width: 88rpx;
				height: 88rpx;
				margin-right: 20rpx;
			}

			&-jdtm {
				flex: 1;
				height: 24rpx;
				background: #003311;
				border-radius: 100rpx;
				border: 2rpx solid #FFFFFF;
				position: relative;
				margin-right: 10rpx;

				&-jdtt {
					position: absolute;
					left: 0;
					top: 0;
					height: 100%;
					border-radius: 100rpx;
					background: #FFBE32;
				}

				&-jdtnum {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 24rpx;
					line-height: 24rpx;
					text-align: center;
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}
		}

		&-numbox {
			height: 160rpx;
			padding: 0 140rpx;
			color: #8B0000;
			font-size: 72rpx;
			font-weight: bold;
		}

		&-btn {
			margin-top: 36rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			text-align: center;
			margin-bottom: 254rpx;
		}

	}



	.slot-machine {
		display: flex;
		height: 100%;
		width: 100%;
	}

	.slot-column {
		flex: 1;
		margin: 0 5px;
		overflow: hidden;
		position: relative;
		border-radius: 8px;
	}

	.digit-viewport {
		height: 160rpx;
		position: relative;
		overflow: hidden;
		clip-path: inset(0 0 0 0);
	}

	.digit-band {
		position: absolute;
		width: 100%;
		backface-visibility: hidden;
		perspective: 1000px;
		transform-style: preserve-3d;
	}

	.digit {
		height: 160rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		transform: translateZ(0.1px);
	}
</style>